<template lang="jade">
  .sidebar
    .sidebar-match
      img(:src="matchImg")
    .sidebar-match-name {{matchName}}
    .sidebar-yearpicker
      select.yearpicker
        option(value="" disabled selected) 2016-2018
        option(value="1") 2017-2018
        option(value="2") 2017-2019
        option(value="3") 2017-2018
    .sidebar-menu
      ul
        li.active
          span.title 赛程结果
          span.selected(v-if="router === 'results'") 
        li
          span.title 联赛赛制
          span.selected(v-if="router === 'competition'")  
        li
          span.title 联赛积分榜
          span.selected(v-if="router === 'scoreboard'")  
</template>

<style lang="less" scoped>
  .sidebar{
    width: 232pt;
    background: #31404B;
    float: left;
    &-match{
      position: relative;
      width: 100%;
      height: 170pt;
      background: #fff;
      img{
        width: 153pt;
        height: 153pt;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    }
    &-match-name{
      width: 100%;
      height: 30pt;
      background: #FFDC00;
      color: #000;
      text-align: center;
      line-height: 30pt;
      font-weight: bold;
    }
    &-yearpicker{
      position: relative;
      width: 100%;
      height: 52pt;
      select.yearpicker{
        width: 82pt;
        height: 25pt;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    }
    &-menu{
      text-align: right;
      font-size: 12pt;
      ul > li{
        position: relative;
        padding-right: 30pt;
        margin: 10pt 0;
        span{
          color: #fff;
        }
        &:hover span{
          color: #FFDC00;
        }
      }
      ul > li.active > span{
        color: #FFDC00;
      }
      span.selected {
        display: block;
        float: right;
        position: absolute;
        right: 0;
        top: 0;
        background: 0 0;
        width: 0;
        height: 0;
        border-top: 8pt solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid #292C31;
      }
    }

  }
    
</style>

<script>
  import matchImg from 'images/epl.png'
  export default {
    data(){
      return {
        router: 'results',
        matchImg: matchImg,
        matchName: '英格兰超级联赛'
      }
    },
    created(){
      
    },
    mounted(){
      let self = this
      
    },
    methods: {
      
    }
  }
</script>